<!-- 自定义标准图表 设置百分百宽度 通过平台组件来适配尺寸 可以替换数据以及设置高级属性自定义扩展
  注:如需设置图片存放文件夹名称需应与当前文件名一致(1并在aircim.webpack.build.component.config.js配置需要打包的文件 2.npm run lib_c 执行打包命令  最后的组件会打包在components/grids中)-->

<template>
  <div
    class="grid-box animate__animated"
    :class="dynamicClassName"
    :style="backgroundStyle"
  >
    <!-- 设置交互方法 -->
    <div
      class="grid-charts"
      ref="chartsRef"
      @click="clickFn()"
      @dblclick="dblclickFn()"
      @mouseenter="mouseenterFn()"
      @mouseleave="mouseleaveFn()"
    ></div>
  </div>
</template>
<script>
//引入echarts图表
import echarts from "echarts";
// 封装方法
import encapsulation from "../utils/aircimGird";
export default {
  //混入封装方法
  mixins: [encapsulation],
  data() {
    return {
      //图表数据
      echartdata: {
        title: "设备统计",
        legendData: ["IDS", "VPN", "交换机", "防火墙", "WAF", "堡垒机"],
        datax1: [
          {
            value: 10,
            name: "IDS",
          },
          {
            value: 5,
            name: "VPN",
          },
          {
            value: 15,
            name: "交换机",
          },
          {
            value: 25,
            name: "防火墙",
          },
          {
            value: 20,
            name: "WAF",
          },
          {
            value: 35,
            name: "堡垒机",
          },
        ],
      },
      //图表样式
      echartsConfigData: {
        // 图例显示
        legendShow: true,
        // 图例颜色
        legendColor: "#A3E2F4",
        // 图例字体
        legendWeight: "18",
        // 饼图字体
        labelWeight: "18",
        //标题样式
        textStyle: {
          color: "#fff",
          fontSize: 32,
        },
        // 图表底板颜色
        linerColor: "rgba(255,255,255,0)",
        // 是否隐藏底框
        hideBottomFrame: false,
      },
      //监听尺寸变化
      resizeObserver: null,
      //图表实例
      mychart: null,
    };
  },
  methods: {
    myEcharts() {
      let that = this;
      that.mychart = echarts.init(that.$refs.chartsRef);

      let option = {
        // backgroundColor: "#0B1837",
        color: [
          "#EAEA26",
          "#906BF9",
          "#FE5656",
          "#01E17E",
          "#3DD1F9",
          "#FFAD05",
        ],
        title: {
          text: that.echartdata.title,
          left: "10",
          top: "2%",
          textAlign: "left",
          textStyle: this.echartsConfigData.textStyle,
        },
        grid: {
          left: -100,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vartical",
          // x: "right",
          top: "center",
          right: "15",
          // bottom: "0%",
          itemWidth: 16,
          itemHeight: 8,
          itemGap: 16,
          show: this.echartsConfigData.legendShow,
          textStyle: {
            color: this.echartsConfigData.legendColor,
            fontSize: this.echartsConfigData.legendWeight,
          },
          data: this.echartdata.legendData,
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: "category",
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B4A6B",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 16,
          },
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B3E5E",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 16,
          },
          splitLine: {
            lineStyle: {
              color: "#0B3E5E",
              width: 2,
              type: "solid",
            },
          },
        },
        calculable: true,
        series: [
          {
            type: "pie",
            radius: ["5%", "10%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            radius: ["90%", "95%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            name: "",
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          {
            stack: "a",
            type: "pie",
            radius: ["20%", "80%"],
            roseType: "area",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: "{c}",
                textStyle: {
                  fontSize: this.echartsConfigData.labelWeight,
                },
                position: "outside",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: this.echartdata.datax1,
          },
        ],
      };
      this.mychart.setOption(option);
      this.mychart.resize();
    },
    // 刷新数据源方法
    refreshData(val) {
      this.echartdata = val.echartdata;
    },
    // 初始化方法
    initGrid() {
      let that = this;
      that.$nextTick(() => {
        that.myEcharts();
      });
    },
    // 样式修改
    refreshConfig(val) {
      const {
        legendShow,
        legendColor,
        legendWeight,
        labelWeight,
        textStyle,
        linerColor,
        hideBottomFrame,
      } = val;
      this.echartsConfigData.legendShow = legendShow;
      this.echartsConfigData.legendColor = legendColor;
      this.echartsConfigData.legendWeight = legendWeight;
      this.echartsConfigData.labelWeight = labelWeight;
      this.echartsConfigData.textStyle = textStyle;
      this.echartsConfigData.linerColor = linerColor;
      this.echartsConfigData.hideBottomFrame = hideBottomFrame;
    },
    // 监听盒子变化
    listenChangeFn() {
      // 添加 resize 事件监听器
      // 获取目标 div 元素
      const targetDiv = this.$refs.chartsRef;

      // 创建 ResizeObserver 实例
      this.resizeObserver = new ResizeObserver((entries) => {
        // 当目标 div 大小发生变化时，触发回调函数
        for (const entry of entries) {
          const { width, height } = entry.contentRect;
          this.mychart.resize();
        }
      });
      // 监听目标 div 元素
      this.resizeObserver.observe(targetDiv);
    },
  },
  mounted() {
    this.myEcharts();
    this.listenChangeFn();
  },
  computed: {
    //设置套系边框(根据主题切换底色边框样式) 以及设置图表背景颜色
    backgroundStyle() {
      const { hideBottomFrame, linerColor } = this.echartsConfigData;
      let styleObject = {
        "background-color": linerColor,
      };
      // 如果 hideBottomFrame 不为 true，则添加 background-image
      if (!hideBottomFrame) {
        styleObject['background-image'] = `url("thumbnail/backImg/border-${this.$store.state.topicColor}.png")`;
      }
      return styleObject;
    },
  },
  // 销毁监听
  beforeDestroy() {
    // 组件销毁前停止监听
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.requestTime != null) {
      clearInterval(this.requestTime);
    }
  },
};
</script>
<style lang="scss" scoped>
.grid-box {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 10px 10px 15px 10px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .grid-charts {
    width: 100%;
    height: 100%;
  }
}
</style>
